<template>
    <div>

        <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                    prop="name"
                    label="名称"
                    width="500">
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="success"
                            @click="edit(scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="primary"
                            @click="addNext(scope.row)">添加下级
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="del(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-dialog
                title="机构信息"
                :visible.sync="dialogVisible"
                width="650">
            <el-form ref="form" :model="form" label-width="180px">
                <el-form-item label="机构名称：">
                    <div style="width: 320px">
                        <el-input v-model="form.name"></el-input>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
        </el-dialog>

    </div>
</template>

<script>


    export default {

        name: 'company',

        data() {
            return {
                tableData: [],

                dialogVisible: false,

                form: {},


                currentCompany: {},	 //选中的机构。
            }
        },

        props: {},

        components: {},

        computed: {},

        methods: {
            async init() {
                const res = await this.$http('mechanism', {});
                this.tableData = this.$util.transData(res, 'id', 'parent_id', 'children');
            },

            edit(item) {
                this.currentCompany = item;
                this.dialogVisible = true;
                this.form = Object.assign({}, this.currentCompany);
            },

            addNext(item) {
                this.currentCompany = item;
                this.dialogVisible = true;
            },

            async del(item) {


                this.$confirm('将永久删除该项目, 是否继续?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await this.$http('createCompany', {
                        id: item.id,
                        del_flag: 1,

                    });
                    this.init();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            handleClose() {
            },

            async save() {

                let para = {};

                if (this.form.id == undefined) {
                    para = {
                        name: this.form.name,
                        type: parseInt(this.currentCompany.type) + 1 + '',
                        parent_id: this.currentCompany.id,
                        parent_ids: this.currentCompany.parent_ids + this.currentCompany.id + ','
                    };
                } else {
                    para = {
                        id: this.form.id,
                        name: this.form.name,
                    };
                }

                const res = await this.$http('createCompany', para);

                this.$message.success('操作成功');
                this.form = {};
                this.dialogVisible = false;
                this.init();
            },
        },

        watch: {},

        mounted() {
            this.init();
        },

    }
</script>

<style scoped>

</style>
